<script setup>
import { reactive, ref } from 'vue'
import { onShow, onLoad } from '@dcloudio/uni-app'
import { UniStore } from '@/utils/UniStorege'
import { SystemConfig } from '../../utils/SystemConfig'
import { StringUtils } from '../../utils/StringUtils'
import { PageUtil } from '../../utils/PageUtil'

const userInfoStore = UniStore.getObject('u_201')
let { account, name, iconSrc, mobile } = userInfoStore || {}

const userInfo = reactive({
  account,
  name,
  iconSrc,
  mobile
})

const modules = ref([
  { icon: '12', value: 'productionReport/pressFilt/list', label: '榨泥' },
  { icon: '10', value: 'stocks/query/result/list', label: '成型' },
  { icon: '10', value: 'stocks/query/forecast/list', label: '干燥涂釉' }
])

const moduleClick = function (item) {
  // uni.navigateTo({
  //   url: '../' + item.value
  // })
  const { id } = item
  PageUtil.addEvent(
    `l-${id}-listview`,
    () => {
      // queryList()
    },
    {
      route: '../' + item.value,
      params: {
        row: {
          __PAGE_ID: id
        }
      }
    }
  )
}

onShow(() => {
  // queryMessages()
  const wss = SystemConfig.getWorkStation()
  const settings = SystemConfig.getSetting()
  const { bc_code } = settings || {}
  console.log('current settings', wss, settings)
  if (!StringUtils.isEmptyOrNull(bc_code) && wss.length) {
    return
  }
})
onLoad(() => {})
</script>

<template>
  <div class="page-warp bg-grey-200">
    <div class="warp-content">
      <div class="content-warp">
        <div class="context common-func">
          <div class="modules-warp">
            <div class="list-warp">
              <div class="list-menu">
                <ul class="modules-list">
                  <li
                    :class="['list-item item-sm']"
                    v-for="item in modules"
                    :key="item.value"
                    @click="moduleClick(item)"
                  >
                    <a class="rounded-icon">
                      <div
                        class="icon-warp border-0 br-0"
                        :style="{ backgroundColor: item.bgColor }"
                      >
                        <image
                          :src="'../../static/icons/menus/' + item.icon + '.png'"
                          class="image-icon"
                          mode="aspectFit"
                        ></image>
                      </div>
                    </a>
                    <div class="module-title">
                      {{ item.label }}
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<style scoped lang="scss">
.page-warp {
  height: calc(100vh - 44px);
  position: relative;
  background-color: #eee;

  .warp-content {
    position: relative;
    z-index: 2;
    height: calc(100% - 160rpx);
    display: flex;
    flex-direction: column;

    .content-warp {
      flex-grow: 1;
      display: flex;
      flex-direction: column;

      .context {
        margin: 12rpx 22rpx;

        background-color: #ffff;
        border-radius: 3px;
        display: flex;
        flex-direction: column;

        .modules-warp {
          flex-grow: 1;
          display: flex;
          flex-direction: column;
          position: relative;

          .list-warp {
            .list-menu {
              .modules-list {
                display: flex;
                flex-wrap: wrap;

                align-items: center;
                padding: 0;

                .list-item {
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  justify-content: center;
                  border-radius: 15rpx;
                  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 8px;
                  position: relative;
                  cursor: pointer;
                  width: 240rpx;
                  height: 220rpx;
                  margin: 24rpx;

                  &.item-sm {
                    width: auto !important;
                    height: auto !important;
                    margin: 8rpx 18rpx !important;
                    border-radius: 0;
                    box-shadow: none;

                    .image-icon {
                      height: 42px;
                      width: 42px;
                    }

                    .module-title {
                      color: #1f1f1f;
                      margin-top: 3rpx;
                    }
                  }

                  .module-title {
                    margin-top: 15rpx;
                    font-size: 14px;
                    color: #1296db;
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  .rounded-icon {
    $icon-size: 105rpx;

    .icon-warp {
      overflow: hidden;
      border-radius: 100%;
      height: $icon-size;
      width: $icon-size;
      border: 2px #2898e3 solid;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      &.br-0 {
        border-radius: 0;
      }

      &.border-0 {
        border: none;
      }

      .image-icon {
        height: 72px;
        width: 72px;
      }
    }
  }
}
</style>
